<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>剩余人生 | 一个讨论人生，珍惜时光，践行梦想的警示地。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="/onethink/Public/static/Flat-UI/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="/onethink/Public/static/Flat-UI/css/flat-ui.css" rel="stylesheet">
	<style>
	.container_banner {
		background-color: #1abc9c;
		color: #d1f2eb;
		margin-left: 42px;
		min-height: 26px;
		padding: 0 30px 2px;
		text-align:center;
		margin-bottom:20px;
	}
	.radio_inline {
		display: inline-block;
		margin-top: 0;
		margin-left: 40px;
		vertical-align: bottom;
		cursor:pointer;
	}
	p ,p a{
		font-size:18px;
	}
	
.container_banner h3 {
	color:#fff;
}
.button {
    -webkit-transition-property: background, color;
	-moz-transition-property: background, color;
	-o-transition-property: background, color;
	transition-property: background, color;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background: #13C6F5;
	color: white;
	text-shadow: none;
	border: none;
	-webkit-border-radius: 200px;
	-moz-border-radius: 240px;
	-ms-border-radius: 240px;
	-o-border-radius: 240px;
	border-radius: 240px;
	width: 100px;
	line-height: 100px;
	height: 100px;
	padding: 0px;
	border-width: 4px;
	font-size: 28px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	font-weight: 300;	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	
	margin: 0;
	text-decoration: none;
	text-align: center;
	
}
.headline {
	padding: 73px 0 110px;
	text-align: center;
}
.logo small {
  color: rgba(52, 73, 94, 0.30000000000000004);
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  padding-top: 5px;
}

	</style>
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
		 
    </div>
	 <div class="container">
		<div class="row">
			<div class="headline">
				<h1 class="logo" style="font-size:108px">
				  <div class="logo"></div>
				  剩余人生<span style="font-size:20px;color:#1abc9c">Beta</span>
				  <small>人生苦短，及时行乐</small>
				</h1>
			</div>
		</div>
		<?php if(is_array($list)): $k = 0; $__LIST__ = $list;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($k % 2 );++$k;?><div class="row" style="position:relative;">
			  <span class="button" style="position:absolute;z-index:999;top:-20px;left:-20px;">第<?php echo ($vo["order_number"]); ?>问</span>
			  
			  <div class="col-md-12 container_banner">
				<h3 class=""><?php echo ($vo["question"]); ?></h3>
			  </div>
			</div>
			<div class="row item">
			  <div class="col-md-12" style="text-align:center">
					<?php if(is_array($vo["selection"])): $i = 0; $__LIST__ = $vo["selection"];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$v): $mod = ($i % 2 );++$i;?><label class="radio radio_inline">
						  <input type="radio" name="group<?php echo ($k); ?>" value="<?php echo ($i); ?>" data-toggle="radio">
						  <?php echo ($v); ?>
						</label><?php endforeach; endif; else: echo "" ;endif; ?>
					
				
			  </div>
			</div><?php endforeach; endif; else: echo "" ;endif; ?>
		<!-------------->
		
		<!-------------->
        <div class="row">
			 <p >人的一生</p>
			<div class="progress">
			  <div id="tooltip" class="progress-bar progress-bar-danger" style="width: 0%;" data-toggle="tooltip" title="死神来了"></div>
			 
			  <div class="progress-bar progress-bar-success" style="width: 0%;"></div>
			   
			  <div class="progress-bar progress-bar-warning" style="width: 0%;"></div>
			 
			</div>
			<p style="color:#fff"><span style="background-color:#e74c3c;">红线：生命已逝</span><span style="margin-left:20px;background-color:#2ecc71">绿线：大好青春</span><span style="margin-left:20px;background-color:#f1c40f;">黄线：人生暮年</span> </p>
		  <div class="col-md-1">
		  </div>
          <div class="col-md-9">
            <div class="footer-banner" style="padding: 0 30px 10px;">
             
			  <p style="padding-top:30px;text-indent:2em;">曾经有一段美好的时光摆在我面前，
					但是我没有珍惜，等到了失去的时候才追悔莫及，
					尘世间最痛苦的事莫过于此。
					如果老天可以再给我一个再来一次的机会，
					我会珍惜那些人、那些事、那段时光，不会让他们那么轻松溜走！--《剩余人生》</p>
              <h3 class="footer-title">人生箴言</h3>
			  <ul>
                <li>争其必然，顺其自然，得之坦然，失之淡然。</li>
				<li>盛年不重来，一日难再晨。及时当勉励，岁月不待人。</li>
				<li>佛曰：人生有八苦：生，老，病，死。爱别离，怨长久，求不得，放不下。</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    <!-- /.container -->
		<footer style="margin-top:30px;">
      <div class="container">
        <div class="row">
          <div class="col-md-7">
            <h3 class="footer-title">测试入口</h3>
            <p>
              <a href="<?php echo U('Home/Index/test');?>" style="color:#2ecc71;" target="_blank">我的剩余人生</a>
            </p>

            <p>
              <a href="http://weibo.com/shengyurensheng" target="_blank" class="weibo-button">微博</a>

            </p>

            <a class="footer-brand" href="http://designmodo.com" target="_blank">
             
            </a>
          </div> <!-- /col-md-7 -->

          <div class="col-md-5">
            <div class="footer-banner">
			   <h4 class="footer-title">剩余人生</h4>
               <p style="text-indent:2em;font-size:18px;">剩余人生是一个讨论人生，珍惜时光，践行梦想的警示地。在这里我们传达，生命有限，我们无法改变它的最大长度，但是我们可以通过良好的生活习惯适当地增加它的有限长度，不仅如此，更重要的是：我们还可以去拓展生命的无限宽度。</a>
			   </p>
            </div>
          </div>
        </div>
      </div>
    </footer>


    <!-- Load JS here for greater good =============================-->
    <script src="/onethink/Public/static/Flat-UI/js/jquery-1.8.3.min.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/bootstrap.min.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/bootstrap-select.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/bootstrap-switch.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/flatui-checkbox.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/flatui-radio.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/jquery.tagsinput.js"></script>
    <script src="/onethink/Public/static/Flat-UI/js/jquery.placeholder.js"></script>
	<script src="/onethink/Public/static/Flat-UI/js/jquery.placeholder.js"></script>
	<script src="/onethink/Public/static/common.js"></script>
	<script>
		
		var $i = 0;
		$('.progress-bar-success').css('width','80%');
		$('.progress-bar-warning').css('width','20%');
		var percent1 = setInterval(function(){
			
			if($i >= 100){
				var percent2 = setTimeout(function(){
					
					$i = -1;
				},100000);
			}else{
				$i++;
			}
			if($i <= 80){ 
				$('.progress-bar-success').css('width',(80-$i)+'%');
				
			}
			$('.progress-bar-danger').css('width',$i+'%');
			
			
			//$('.headline').html($i);
		},300);
		 
    </script>	
  </body>
</html>